<template>
    <div style="position:relative">
        <div style="position:absolute;right:24px;top:4px;z-index:10;">
            <div @click="handleAdd" style="cursor:pointer;width:40px;height:20px;line-height:20px;text-align:center;border-radius:4px;background:#409EFF"><i style="font-size: 14px;color:#fff" class="el-icon-plus"></i></div>
        </div>
        <el-row>
            <el-col :span="12">键名</el-col>
            <el-col :span="10">键值</el-col>
            <el-col :span="2"></el-col>
        </el-row>          
        <el-row>
            <el-col :span="12">
                <el-input value="时间周期"/>
            </el-col>
            <el-col :span="10">
                <el-select v-model="period" >
                    <el-option label="无" value="close"></el-option>
                    <el-option v-for="(item) in periodList" :key="item.key" :label="item.label" :value="item.key">

                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="2"></el-col>
        </el-row>
        <!-- 动态增减键值对 -->
        <el-row v-for="(item, index) in list" :key="index">
            <el-col :span="12">
                <el-input v-model="item.label" />
            </el-col>
            <el-col :span="10">
                <el-input v-model="item.value" />
            </el-col>
            <el-col :span="2">
                <i style="cursor:pointer; font-size: 16px;color:#686f79" class="el-icon-error" @click="handleRemove(index)"></i>
            </el-col>
        </el-row>    
    </div>
</template>

<script>
let reg = /([a-zA-Z]+)=(.+)/;
export default {
    name:'ApiParams',
    props:{
        query:String
    },
    data(){
        return {
            list:[],
            period:null,
            periodList:[
                { label:'本日', key:'today' }, { label:'昨日', key:'yesterday'},
                { label:'本周', key:'week' }, { label:'上周', key:'lastWeek' },
                { label:'本月', key:'month' }, { label:'上月', key:'lastMonth' },
                { label:'本年', key:'year' }, { label:'去年', key:'lastYear' }
            ]
        }
    },
    watch:{
        query:{
            immediate:true,
            handler(){
                if ( this.query && this.query.length ) {
                    let strArr = this.query.split('&');
                    let result = [];
                    strArr.forEach(item=>{
                        let res = reg.exec(item);
                        if ( item.label === 'period') {
                            this.period = res[2];
                        } else {
                            result.push({ label:res[1], value:res[2] });
                        }
                    });
                    this.list = result;
                } else {
                    this.list = [];
                } 
            }
        }
    },
    methods:{
        handleAdd(){
            this.list.splice(this.list.length, 0, { label:'', value:'' });
        },
        handleRemove(index){
            this.list.splice(index, 1);
        },
        updateParams(){
            let newArr = [...this.list].filter(i=>i.value);
            if ( this.period && this.period !== 'close' ) {
                newArr.push({ label:'period', value:this.period });
            }
            this.$emit('saveParams', newArr);
        }
    }
}
</script>